<template>
  <div class="classpage ">
    <h2>分类：{{ gclass }}</h2>
    <div v-if="goods.length">
      <el-row
        :gutter="20"
        class="se-goods-container"
      >
        <el-col :span="4" v-for="(item, index) in goods" :key="index">
          <div class="se-goods" @click="goBuy(item)">
            <img :src="item.imgUrl" class="se-img" />
            <span class="se-tittle">{{ item.title }}</span
            ><br />
            <div class="se-price-box">
              <span class="se-price1">￥{{ item.price }}</span
              >&nbsp;&nbsp;
              <span class="se-price2"
                >￥<del>{{ item.uprice }}</del></span
              >&nbsp;&nbsp;&nbsp;
              <span class="se-num">库存{{ item.num }}件</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-else>暂无该分类商品</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gclass: "",
      goods: []
    };
  },
  async mounted() {
    this.gclass = this.$route.query.gclass || "";
    if (this.gclass) {
      const res = await fetch("/data/goods.json");
      const all = await res.json();
      this.goods = all.filter(item => item.gclass === this.gclass);
    }
  },
   methods: {
    goBuy(item) {
      this.$router.push({
        name: "buy",
        query: {
          product: JSON.stringify(item),
        },
      });
    },
  },
};
</script>

<style scoped>
.classpage {
  min-height: 400px;
  background-color: #ffb188;;
}


/* 商品总容器 */
.se-goods-container {
  width: 96%;
  /* background-color: #fff; */
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* 单个商品 */
.se-goods {
  height: 18rem;
  margin-bottom: 1rem;
  min-height: 36px;
  border-top-left-radius: 25px;
  cursor: pointer;
  border: 2px solid #ffb188;
}

.se-goods:hover {
  border: 2px solid white;
}

/* 商品图片 */
.se-img {
  width: 100%;
  height: 13rem;
  border-top-left-radius: 25px;
}

/* 商品标题 */
.se-tittle {
  height: 3rem;
  font-weight: bolder;
}

/* 价格盒子 */
.se-price-box {
  height: 2rem;
  line-height: 200%;
}

.se-price1 {
  color: red;
  font-weight: bolder;
  font-size: large;
}

/* 曾经价格 */
.se-price2 {
  color: #dfe0df;
}

/* 数量 */
.se-num {
  font-size: 10px;
  color: #dfe0df;
}
</style>